<template>
  <div class="userText">
    <div class="textHeader">
      <Tag ref="tagVal" :tag="tag"></Tag>
    </div>
    <div
      class="textMain"
      onselectstart="return false;"
      v-loading="loading"
      element-loading-text="loading..."
      element-loading-spinner="el-icon-loading"
    >
      <span
        v-for="(item, index) in message"
        @mouseup="changeSpan(item, index)"
        :key="index"
        style="font-size: 30px"
        :class="{ bgcolor: spanIndex.indexOf(index) > -1 }"
        >{{ item }} <span class="spanTag">{{ spantag[index] }}</span></span
      >
    </div>
    <div class="textFooter">
      <span style="position: absolute; left: 20px; font-size: 20px">
        起始词:<el-select
          v-model="wordRelation.startContent"
          placeholder="请选择"
          style="width: 120px"
        >
          <el-option v-for="(item, index) in markWord" :key="index" :label="item" :value="item">
          </el-option> </el-select
      ></span>
      <span style="position: absolute; left: 220px; font-size: 20px"
        >结束词:
        <el-select
          v-model="wordRelation.endContent"
          placeholder="请选择"
          style="width: 120px"
        >
          <el-option v-for="(item, index) in markWord" :key="index" :label="item" :value="item">
          </el-option>
        </el-select>
      </span>
      <span style="position: absolute; left: 425px; font-size: 20px"
        >关系:<el-input
          v-model="wordRelation.type"
          placeholder="请输入关系"
          style="width: 120px"
        ></el-input
      ></span>
      <el-button type="success" style="position: absolute;right: 15px;bottom: 2px;" @click="addRelation" round>提交</el-button>
    </div>
  </div>
</template>

<script>
    import Tag from "@/views/userHome/tag";
    class entityItem {
        constructor(entityId, articleId, paragraphsId, content, type, userId) {
            this.entityId = entityId;
            this.articleId = articleId;
            this.paragraphsId = paragraphsId;
            this.content = content;
            this.type = type;
            this.userId = userId;
        }
    }
    export default {
        name: "userText",
        components: {
            Tag,
        },
        data() {
            return {
                // 选中状态
                statuClass: null,
                // 段落信息
                message: [],
                spanIndex: [],
                // 添加上的标签
                spantag: [],
                // 文章属性
                article: {
                    entityId: "",
                    articleId: 1,
                    paragraphsId: 0,
                    userId: 1,
                },
                // 标签关系属性
                wordRelation: {
                    // 开始标签
                    startContent: "",
                    // 指向标签
                    endContent: "",
                    // 标签关系
                    type: "",
                    // 当前文章id
                    articleId: 1,
                    // 当前段落id
                    paragraphsId: 0,
                    // 用户id
                    userId: 0,
                },
                //用户标注的情况
                entities: [],
                tag: [],
                //判断是否选中
                arrIndex: 0,
                //标注的文本
                markWord: [],
                //加载
                loading: true,
                //首段判断
                isFirst: false
            };
        },
        methods: {
            // 提交两词的关系
            addRelation() {
                this.$http.post("addRelation", this.wordRelation).then((res) => {
                    if (res.data.code == 200) {
                        this.wordRelation.startContent = ''
                        this.wordRelation.endContent = ''
                        this.wordRelation.type = ''
                        this.$message.success("关系提交成功");
                        this.$emit('neoDraw')
                    } else {
                        this.$message.error("关系提交失败");
                    }
                })
            },
            //获取用户段落信息
            //获取下一段
            async getNewPar() {
                await this.$http
                    .get(
                        "getNextPar?userId=" +
                        this.article.userId +
                        "&parId=" +
                        this.article.paragraphsId
                    )
                    .then((res) => {
                        this.loading = false;
                        this.message = res.data.entityList;
                        this.tag = res.data.typeList;
                        this.article.articleId = res.data.articleId;
                        this.wordRelation.articleId = res.data.articleId;
                        this.article.paragraphsId = res.data.paragraphsId;
                        this.wordRelation.paragraphsId = res.data.paragraphsId;
                        this.$emit('neoDraw')
                        this.article.entityId = res.data.entities[0].entityId;
                        this.entities = res.data.entities;
                        for (let word of res.data.entities) {
                            this.markWord.push(word.content);
                        }
                        for (let i = 0; i < res.data.entities.length; i++) {
                            let spanindex = this.message.indexOf(res.data.entities[i].content);
                            this.spanIndex.push(spanindex);
                            this.spantag[spanindex] = res.data.entities[i].type;
                        }
                    });
            },
            //获取上一段
            async getBackPar() {
                await this.$http
                    .get(
                        "getBackPar?userId=" +
                        this.article.userId +
                        "&parId=" +
                        this.article.paragraphsId
                    )
                    .then((res) => {
                        this.loading = false;
                        this.message = res.data.entityList;
                        this.tag = res.data.typeList;
                        this.article.articleId = res.data.articleId;
                        this.wordRelation.articleId = res.data.articleId;
                        this.article.paragraphsId = res.data.paragraphsId;
                        this.wordRelation.paragraphsId = res.data.paragraphsId;
                        this.$emit('neoDraw')
                        this.article.entityId = res.data.entities[0].entityId;
                        this.entities = res.data.entities;
                        for (let word of res.data.entities) {
                            this.markWord.push(word.content);
                        }
                        for (let i = 0; i < res.data.entities.length; i++) {
                            let spanindex = this.message.indexOf(res.data.entities[i].content);
                            this.spanIndex.push(spanindex);
                            this.spantag[spanindex] = res.data.entities[i].type;
                        }
                    });
            },
            //切换用户
            changeUser() {
                //从vuex中读取用户id
                if (this.$store.state.userData != null) {
                    this.article.userId = this.$store.state.userData.id;
                    //储存用户id到session
                    window.sessionStorage.setItem("loginId", this.article.userId);
                } else {
                    this.article.userId = this.$store.state.loginId;
                }
                this.article.paragraphsId = 0;
                this.getNewPar();
            },
            //选中时和不选择时的状态操作
            changeSpan(item, index) {
                this.arrIndex = this.spanIndex.indexOf(index);
                if (this.arrIndex > -1) {
                    this.spanIndex.splice(this.arrIndex, 1);
                    this.spantag[index] = "";
                    for (let i = 0; i < this.entities.length; i++) {
                        if (this.entities[i].content == item) {
                            this.entities.splice(i, 1);
                        }
                    }
                } else {
                    if (this.$refs.tagVal.itemVal == "") return;
                    this.spanIndex.push(index);
                    this.spantag[index] = this.$refs.tagVal.itemVal;
                    this.entities.push(
                        new entityItem(
                            this.article.entityId,
                            this.article.articleId,
                            this.article.paragraphsId,
                            item,
                            this.spantag[index],
                            this.article.userId
                        )
                    );
                }
            },
            right() {
                this.statuClass = "right";
                setTimeout(() => {
                    this.statuClass = "";
                    // this.spantag = [];
                    // this.spanIndex.splice(0, this.spanIndex.length);
                    this.$http.post("submitEntity", this.entities).then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success("标注提交成功");
                            for (let word of this.entities) {
                                this.markWord.push(word.content);
                            }
                        } else {
                            this.$message.error("请勿重复提交");
                        }
                    });
                }, 1000);
            },
            error() {
                this.statuClass = "error";
                setTimeout(() => {
                    this.markWord = [];
                    this.getNewPar();
                    this.statuClass = "";
                    this.spantag = [];
                    this.spanIndex.splice(0, this.spanIndex.length);
                }, 1000);
            },
            next() {
                this.markWord = [];
                this.getNewPar();
                this.statuClass = "";
                this.spantag = [];
                this.spanIndex.splice(0, this.spanIndex.length);
            },
            back() {
                if (this.$store.state.userPar != null) {
                    if (this.article.paragraphsId == this.$store.state.userPar) return;
                } else {
                    if (this.article.paragraphsId == this.$store.state.loginPar) return;
                }
                this.markWord = [];
                if (this.article.paragraphsId == 1040) return
                this.getBackPar();
                this.statuClass = "";
                this.spantag = [];
                this.spanIndex.splice(0, this.spanIndex.length);
            },
        },
        created() {
            //从vuex中读取用户id
            if (this.$store.state.userData != null) {
                this.article.userId = this.$store.state.userData.id;
                this.wordRelation.userId = parseInt(this.$store.state.userData.id);
                //储存用户id到session
                window.sessionStorage.setItem("loginId", this.article.userId);
            } else {
                this.article.userId = this.$store.state.loginId;
                this.wordRelation.userId = parseInt(this.$store.state.loginId);
            }
            this.getNewPar();
        },
    };
</script>

<style>
    /* 点击添加标签的样式 */
    
    .spanTag {
        color: #6c53c6;
        font-size: 20px;
        font-weight: bold;
    }
    
    .userText {
        display: grid;
        position: fixed;
        top: 10%;
        left: 30%;
        grid-template-rows: 60px auto 40px;
        width: 675px;
        height: auto;
        box-shadow: 1px 1px 5px #888888;
    }
    
    .textHeader {
        display: grid;
        background: #583fcf;
    }
    
    .textMain {
        padding: 20px 15px;
        font-family: "Lato", "Trebuchet MS", Roboto, Helvetica, Arial, sans-serif;
        -moz-user-select: none;
        /* 火狐
        -webkit-user-select: none;
        /*webkit浏览器*/
        /* -ms-user-select: none; */
        /*IE10*/
        /* -khtml-user-select: none; */
        /*早期浏览器*/
        /* user-select: none; */
    }
    /* 鼠标拖动时文字设置样式 */
    
    .textMain ::-moz-selection {
        background: #ffe184;
        color: #000052;
    }
    
    .textMain ::selection {
        background: #ffe184;
        color: #000052;
    }
    
    .textFooter {
        position: relative;
        line-height: 40px;
        background: #f3f3f3;
    }
    
    .bgcolor {
        background: #ffe184;
    }
    
    .right {
        border: 2px solid #4fd364;
    }
    
    .error {
        border: 2px solid #f74c4a;
    }
    /* 填写关系标签样式 */
    
    .tagRelation {
        display: inline-block;
        text-align: center;
        font-weight: 600;
        margin-left: 7px;
        padding-left: 9px;
        padding-right: 9px;
        border-radius: 10px;
        color: #ffffff;
        background: #583fcf;
    }
</style>